<template>
  <el-container direction="vertical" class="container">
    <el-row>
      <el-col :span="16">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" placeholder="请输入员工姓名" />
          </el-form-item>
          <el-form-item label="年份">
            <el-select v-model="searchForm.year" clearable placeholder="请选择">
              <el-option label="2022" value="2022" />
              <el-option label="2021" value="2021" />
              <el-option label="2020" value="2020" />
              <el-option label="2019" value="2019" />
              <el-option label="2018" value="2018" />
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-select v-model="searchForm.month" clearable placeholder="请选择">
              <el-option v-for="o in 12" :key="o" :value="o">{{ o }}月</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addHandler">新增绩效</el-button>
        <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
          导出
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;height: 568px"
          max-height="568"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <!-- <el-table-column
            prop="id"
            label="绩效编号"
            width="200"
            align="center"
          />
          <el-table-column
            prop="employeeId"
            label="员工编号"
            width="200"
            align="center"
          /> -->
          <el-table-column
            prop="name"
            label="姓名"
            width="150"
            align="center"
          />
          <el-table-column
            prop="employeeType"
            label="员工类型"
            width="150"
            align="center"
          />
          <el-table-column
            prop="year"
            label="年份"
            width="100"
            align="center"
          />
          <el-table-column
            prop="month"
            label="月份"
            width="100"
            align="center"
          />
          <el-table-column
            prop="baseWage"
            label="基础工资"
            width="100"
            align="center"
          />
          <el-table-column
            prop="rating"
            label="绩效指数"
            width="100"
            align="center"
          />
          <el-table-column
            label="总工资"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <i class="el-icon-coin" />
              <span style="margin-left: 10px">{{ scope.row.allWage }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="200"
            show-overflow-tooltip
            header-align="center"
            align="left"
          />
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="medium"
                icon="el-icon-edit-outline"
                title="编辑"
                round
                @click="editHandler(scope.$index, scope.row)"
              />
              <el-button
                size="medium"
                type="danger"
                title="删除"
                icon="el-icon-delete"
                round
                @click="handleDelete(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="tableQuery.page"
          :page-size="tableQuery.pageSize"
          :hide-on-single-page="isHidePage"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <keep-alive>
      <PerformanceDialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        :dialog-title="dialogTitle"
        @closeDialog="closeHandler"
        @addDialog="addHandler"
        @editDialog="editHandler"
        @getTable="getTable"
      />
    </keep-alive>

    <!-- <notice-dialog :dialog-visible="dialogFormVisible" :close-dialog="closeDialog" /> -->

  </el-container>

</template>

<script>
import { getAchievementList, delAchievement } from '@/api/achievement'
// import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils/index'
import waves from '@/directive/waves' // waves directive
import { Message, MessageBox } from 'element-ui'
import PerformanceDialog from './components/performanceDialog'
export default {
  name: 'Employee',
  components: { PerformanceDialog },
  directives: { waves },
  data() {
    return {
      searchForm: {
        name: '',
        year: '',
        month: ''
      },
      listLoading: true, // 列表加载动画
      downloadLoading: false,
      // currUser: this.$store.getters.roles, // 获取当前登录用户
      tableData: null, // 表格数据
      total: 0, // 表格总数
      isHidePage: false, // 是否隐藏分页
      tableQuery: { // 表格查询参数
        page: 1,
        pageSize: 10,
        name: '',
        year: '',
        month: ''
        // token: getToken()
      },
      dialogFormVisible: false, // 对话框是否隐藏
      dialogTitle: '',
      chooseData: {
        id: ''
      }
    }
  },
  created() {
    this.getTable()
  },
  // activated() {
  //   this.$on('dialogClose', this.dialogFormVisible = false)
  // },
  methods: {
    addHandler() {
      this.dialogFormVisible = true
      this.dialogTitle = '添加绩效'
    },
    editHandler(index, row) {
      this.dialogFormVisible = true
      this.chooseData.id = row.id
      this.dialogTitle = '编辑绩效'
    },
    closeHandler() {
      this.dialogFormVisible = false
      this.chooseData = {
        id: ''
      }
    },
    onSubmit() {
      this.tableQuery.name = this.searchForm.name
      this.tableQuery.year = this.searchForm.year
      this.tableQuery.month = this.searchForm.month
      this.getTable()
    },
    getTable() {
      this.listLoading = true
      getAchievementList(this.tableQuery).then(response => {
        if (response) {
          const list = response.data.list
          list.forEach(element => {
            element.allWage = element.baseWage * element.rating
          })
          this.tableData = list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 1000)
        }
        this.listLoading = false
      })
      if (this.total / this.tableQuery.pageSize <= 1) {
        this.isHidePage = true
      }
      // if(this.$store.getters.roles)
    },
    handleCurrentChange(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handlePreClick(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handleNextClick(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handleDelete(index, row) {
      MessageBox.confirm('将删除该绩效, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAchievement(row.id).then(response => {
          Message({
            message: response.data.message,
            type: 'success',
            duration: 5 * 1000
          })
        })
        this.getTable()
      }).catch(error => error)
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/ventor/Export2Excel')
        .then(excel => {
          const tHeader = ['绩效编号', '员工编号', '姓名', '员工类型', '年份', '月份', '基础工资', '绩效指数', '总工资', '备注']
          const filterVal = ['id', 'employeeId', 'name', 'employeeType', 'year', 'month', 'baseWage', 'rating', 'allWage', 'remark']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '员工绩效导出表'
          })
          this.downloadLoading = false
        })
    },
    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 6px;
}
.container{
  height: 100%;
  padding: 10px;
  a:hover{
    color: blue;
    text-decoration: underline;
  }
}
</style>
